<template>
  <div>
    <div class="info">
      <p class="title">支付金额</p>
      <div>
        <span>￥</span>
        <p>{{formData.showAmount}}</p>
      </div>
    </div>
    <div class="buyHint">
      <div>
        <img src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/weixin.jpg" alt />
        <span>微信支付</span>
      </div>
      <div class="gou">
        <p></p>
      </div>
    </div>
    <button class="btn" @click="payClick">确认支付</button>
    <div class="box" v-if="isCodeShow">
      <div class="zz"></div>
      <div class="showCode">
        <input
          type="number"
          v-model="codeForm.code"
          placeholder="输入验证码"
          maxlength="6"
        />
        <div>
          <button @click="isCodeShow=false">取消</button>
          <button class="ok" @click="sendCodeClick">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCurrentPageParams } from '@/utils'
import {
  FIND_SHOP_OPEN_BY_MOBILE,
  CREATE_OPEN_SHOP_PAY_ORDER,
  CREATE_OPEN_SHOP_ORDER,
  SEND_VERIFICATION_CODE,
  BIND_PHONE,
  FIND_USER_OPEN_ID
} from '@/api'
import { Base64 } from 'js-base64'

export default {
  components: {},
  props: {},
  data () {
    return {
      openShopOrderNo: '',
      codeForm: {},
      isCodeShow: false,
      canOpenShop: true, // 是否可以开店
      openId: '',
      formData: {}
    }
  },
  computed: {
    // formData () {
    //   let obj = {}
    //   obj.amount = getCurrentPageParams('amount')
    //   obj.showAmount = Number(obj.amount * 0.01).toFixed(2)
    //   obj.openShopOrderNo = getCurrentPageParams('openShopOrderNo')
    //   obj.customerId = getCurrentPageParams('customerId')
    //   obj.shopIdentity = getCurrentPageParams('shopIdentity')
    //   return obj
    // }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this._findShopInfoByCellphone()
    this.getwxCode()
    this.init()
  },
  methods: {
    payClick () {
      this._payOrder()
    },
    _payOrder () {
      const vm = this
      let params = {
        openId: vm.openId,
        payMerId: this.$store.state.payMerId,
        openShopOrderNo: vm.openShopOrderNo,
        shopIdentity: vm.formData.shopIdentity,
        payMethodEnum: 'MINI', // 之前是改了的WECHAT
        paySourceEnum: 'H5' // 之前是改了的MINI
      }
      CREATE_OPEN_SHOP_PAY_ORDER(params)
        .then(r => {
          if (r.data.code === '0' && r.data.data) {
            if (r.data.data.data === null) {
              // 0元的情况
              vm.$alert('缴费成功', '').then(() => {
                vm.$router.go(-2)
              })
            } else {
              let payInfo = Base64.decode(r.data.data.data)
              vm._callWechatPay(JSON.parse(payInfo))
            }
          } else if (
            r.data.code === 'REQUEST-ERROR' &&
            r.data.msg === '未绑定手机。'
          ) {
            // vm._sendVerificationCode()
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    sendCodeClick () {
      const vm = this
      if (!vm.codeForm.code) {
        vm.$toast('验证码不能为空')
        return false
      }
      vm._bindPhone()
    },
    init () {
      const vm = this
      vm.formData = {
        amount: getCurrentPageParams('amount'),
        showAmount: Number(getCurrentPageParams('amount') * 0.01).toFixed(2),
        openShopOrderNo: getCurrentPageParams('openShopOrderNo'),
        customerId: getCurrentPageParams('customerId'),
        shopIdentity: getCurrentPageParams('shopIdentity')
      }
      if (!vm.canOpenShop) {
        vm.$toast('您的账户已开店')
        return false
      }

      if (vm.formData.openShopOrderNo === 'null') {
        vm._createOpenShopOrder()
      } else {
        vm.openShopOrderNo = vm.formData.openShopOrderNo
      }
    },
    _createOpenShopOrder () {
      const vm = this
      let params = {
        providerId: vm.$store.state.account.providerId,
        customerId: vm.formData.customerId,
        shopIdentity: vm.formData.shopIdentity,
        openShopType: vm.$cookie.get('IS-UPGRADE') ? 'UPGRADE' : 'OPEN'
      }
      CREATE_OPEN_SHOP_ORDER(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.openShopOrderNo = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 如果没有就整个接口过来获取一个openShopOrderNo
    _sendVerificationCode () {
      const vm = this
      let params = {
        identity: 'CUSTOMER',
        phone: vm.$cookie.get('store-mobile'),
        relateId: vm.formData.customerId
      }
      SEND_VERIFICATION_CODE(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.isCodeShow = true
            vm._createOpenShopOrder()
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 发送短信
    _bindPhone () {
      const vm = this
      let params = {
        code: vm.codeForm.code,
        identity: 'CUSTOMER',
        phone: vm.$cookie.get('store-mobile'),
        relateId: vm.formData.customerId
      }
      BIND_PHONE(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('绑定成功', '').then(() => {
              vm.isCodeShow = false
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 提交短信
    _findShopInfoByCellphone () {
      const vm = this
      FIND_SHOP_OPEN_BY_MOBILE(
        vm.$store.state.account.providerId,
        vm.$cookie.get('store-mobile')
      )
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data) {
              vm.canOpenShop = false
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 查询是否可以开店（1）
    getwxCode () {
      const vm = this
      wx.login({
        timeout: 6000,
        success: function (res) {
          vm._getWxCode(res.code)
        },
        fail: function (err) {
          console.error(err)
        }
      })
    },
    _getWxCode (code) {
      const vm = this
      let appId = vm.$store.state.appId
      let appSecret = Base64.decode(vm.$store.state.appSecret)
      FIND_USER_OPEN_ID(appId, appSecret, code)
        .then(r => {
          if (r.data.code === '0') {
            vm.openId = r.data.data
          } else {
            this.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    _callWechatPay (payInfo) {
      const vm = this

      wx.requestPayment({
        ...payInfo,
        success: function (res) {
          vm.$alert('支付成功', '').then(() => {
            vm.$router.go(-2)
          })
        },
        fail: function (err) {
          console.log(err)
          if (err.errMsg === 'requestPayment:fail cancel') {
          } else {
            vm.$toast('支付失败')
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'static/styles/color.scss';

.info {
  width: 100%;
  padding: 20px 10px;
  font-size: 14px;
  color: #000;
  .title {
    padding: 5px 0;
  }
  div {
    display: flex;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #d6d6d6;
    span {
      margin-right: 8px;
    }
  }
}
.buyHint {
  padding: 15px 10px;
  border-bottom: 3px solid #cecdcb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  div {
    display: flex;
    align-items: center;
    img {
      width: 30px;
      height: 30px;
      border-radius: 50px;
    }
    span {
      font-size: 14px;
      font-weight: 500px;
      color: #000;
      margin-left: 10px;
    }
  }
  .gou {
    background: #fe2725;
    border-radius: 50px;
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    p {
      margin-bottom: 3px;
      width: 3px;
      height: 6px;
      border-right: 1px solid #ffffff;
      border-bottom: 1px solid #ffffff;
      transform: rotate(40deg);
    }
  }
}
.btn {
  width: 90%;
  height: 30px;
  font-size: 14px;
  border-radius: 25px;
  color: #fff;
  background: $blue;
  margin-top: 30px;
}
.box {
  .zz {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000000;
    opacity: 0.3;
  }
  .showCode {
    width: 320px;
    height: 130px;
    border: 2px solid #eee;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    overflow: auto;
    padding: 20px 0;
    input {
      width: 95%;
      margin: auto;
      border-radius: 4px;
      border: 1px solid #d6d6d6;
      font-size: 14px;
    }
    div {
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      button {
        width: 100px;
        height: 30px;
        font-size: 14px;
      }
      .ok {
        background: $blue;
        color: #fff;
      }
    }
  }
}
</style>